<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/layui/css/style.css">
</head>
<body background="/img/login.png">
<div class="login-main">
    <header class="layui-elip">类别统计</header>
    <form class="layui-form">
        <div class="layui-input-inline">
            <div id="chart1" style="width: 100%;height: 260px;">
                <p id="ch1" style='font-size:100%;display:none;text-align: center;line-height: 200px;color: red;font-weight: bold;'>药品类别暂无数据</p>
            </div>
        </div>
    </form>
</div>
<script src="/static/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form','echarts'], function () {
        var $ = layui.$,
            form = layui.form,
            echarts = layui.echarts;

        var v = [];
        //调用初始化数据
        initChart1Data();

        var series = [];
        for(var i = 0;i<v.length;i++){
            series.push(v[i].value);
        }

        var data = [];
        for(var i = 0;i<v.length;i++){
            data.push(v[i].name);
        }
        debugger;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart1'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {},
            legend: {
                data:['类别']
            },
            xAxis: {
                data: data
            },
            grid:{//宽高
                x:30,
                x2:50
            },
            yAxis: {},
            series:[{
                name: '销量',
                type: 'bar',
                barWidth:30,
                data: series
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 初始化饼图数据
        function initChart1Data() {
            $.ajax({
                url: "/echart/fxCountData",
                type: "post",
                async: false,
                success: function (res) {
                    debugger;
                    var data = res.data.countList;
                    var datanum = res.data.countnumList;
                    if (data.length != 0) {
                        for (var i = 0; i < data.length; i++) {
                            v.push({value: datanum[i], name: data[i].stype});
                        }
                    }
                }
            })
        }

        //图表自适应
        setTimeout(function () {
            window.onresize = function () {
                chart1.instance.resize();
            }
        }, 300)
    })
</script>
</body>
</html>